<template>
  <div class="showpage">
    <div class="page-show">
      <div class="header-tabs">
        <dl>
          <dt></dt>
          <dd>演唱会</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>话剧歌剧</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>休闲展示</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>戏曲相声</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>亲子/艺术</dd>
        </dl>
      </div>
      <div class="todyMustGrab">
        <h2>今日必抢</h2>
        <div class="todyMustGrab-content">
          <ShowOfToday
            v-for="mustgrab in mustgrabs"
            :key="mustgrab.performanceId"
            :id="mustgrab.performanceId"
            :title="mustgrab.name.slice(0,20)"
            :url="mustgrab.posterUrl"
           />
        </div>
      </div>
      <div class="show-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id"><img :src="banner.url" alt=""></van-swipe-item>
        </van-swipe>
      </div>
      <div class="bigStarAll">
        <h2>大咖新动态</h2>
        <div class="bigstar">
          <ShowOfBigStar
            v-for="bigStar in bigStars"
            :key="bigStar.id"
            :name="bigStar.celebrityName"
            :url="bigStar.headUrl"
            :recommendTag="bigStar.recommendTag"
          />
        </div>
      </div>
      <div class="deserveSee">
        <h2>什么值得看</h2>
        <div class="deserveSee-content">
          <ShowOfDeserveSee
          v-for="deserveSee in deserveSees"
          :key="deserveSee.rankId"
          :title="deserveSee.title"
          :shortTitle="deserveSee.shortTitle"
          :rankId="deserveSee.rankId"
          :coverUrl="deserveSee.coverUrl"
          />
        </div>
      </div>
      <div class="recommend">
        <h2>为你推荐</h2>
        <van-list
          class="recommend-card"
          v-model="loading"
          :finished="isEnd"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <van-cell v-for="recommend in recommends" :key="`recommend-${recommend.performanceId}`" >
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <router-link tag="section" :to="`/buyticket?id=${recommend.performanceId}`">
                <img :src="recommend.posterUrl" alt="">
                <p>{{ recommend.name.length > 18 ? recommend.name.slice(0,18) +'...' : recommend.name}}</p>
                <p>{{ recommend.showTimeRange }}</p>
                <p>¥ {{ recommend.lowestPrice }} 起</p>
              </router-link>
            </template>
          </van-cell>
        </van-list>
        <!-- <van-button v-if="isEnd" type="primary" size="large" disabled>没有更多...</van-button>
        <van-button v-else type="primary" size="large" @click="loadMore">加载更多</van-button> -->
      </div>
    </div>
    <div class="show-footer">
      <ul>
        <li>首页</li>
        <router-link tag="li" to="/order">订单</router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import ShowOfToday from '@/components/pageofshow/ShowOfToday.vue'
import ShowOfBigStar from '@/components/pageofshow/ShowOfBigStar.vue'
import ShowOfDeserveSee from '@/components/pageofshow/ShowOfDeserveSee.vue'
export default {
  data () {
    return {
      deserveSees: [],
      recommends: [],
      mustgrabs: [],
      bigStars: [],
      banners: [],
      start: 1, // 获取数据开始字段
      isEnd: false, // 是否加载完所有商品
      loading: false // 是否正在加载
    }
  },
  created () {
    this.getRecommend()
  },
  methods: {
    getRecommend () {
      // 获取'什么值得看'的数据
      this.$http.getShowDeserveSee().then(resp => {
        // console.log(resp)
        this.deserveSees = resp.data.data
      })
      this.$http.getMustGrabData().then(resp => {
        // console.log(resp)
        this.mustgrabs = resp.data.data.slice(0, 3)
      })
      this.$http.getBigStarData().then(resp => {
        // console.log(resp)
        this.bigStars = resp.data.data
      })
      this.$http.getShowBanndersData().then(resp => {
        // console.log(resp)
        this.banners = resp.data.data.data
        // console.log(this.banners)
      })
    },
    loadMore () {
      // 获取'为你推荐'的数据
      this.$http.getRecommendData(this.start).then(resp => {
        this.recommends = this.recommends.concat(resp.data.data)
        if (this.start >= 5) {
          this.isEnd = true
        }
        this.start++
        this.loading = false
      })
    }
  },
  components: {
    ShowOfToday,
    ShowOfBigStar,
    ShowOfDeserveSee
  }
}
</script>
<style lang="scss" scoped>
.showpage{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .show-footer{
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ededed;
    ul{
      height: 20px;
      width: 50%;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      li:nth-of-type(1){
        color: red;
      }
    }
  }
  .header-tabs{
    display: flex;
    width: 100%;
    margin-top: 20px;
    dl{
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      dt{
        height: 50px;
        width: 50px;
      }
      dd{
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #666;
      }
    }
    dl:nth-of-type(1) dt{
      background: url(../assets/1.png);
      background-size: 100% 100%;
    }
    dl:nth-of-type(2) dt{
      background: url(../assets/2.png);
      background-size: 100% 100%;
    }
    dl:nth-of-type(3) dt{
      background: url(../assets/3.png);
      background-size: 100% 100%;
    }
    dl:nth-of-type(4) dt{
      background: url(../assets/4.png);
      background-size: 100% 100%;
    }
    dl:nth-of-type(5) dt{
      background: url(../assets/5.png);
      background-size: 100% 100%;
    }
  }
}
.page-show{
  width: 100%;
  padding: 0 3%;
  flex:1;
  overflow: auto;
  box-sizing: border-box;
}
.van-grid-item{
    background-color: red;
    .van-grid-item__content{
      background-color: red !important;
      div{
        border-radius: 50%;
      }
    }
  }
h2{
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
}
.todyMustGrab {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  padding-bottom: 20px;
  .todyMustGrab-content {
    width: 100%;
    height: 270px;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }
}
.show-banner {
    width: 100%;
    height: 80px;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    .van-swipe,.van-swipe-item{
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
    /* .van-swipe-item:nth-of-type(2n+1){
      background: red;
    }
    .van-swipe-item:nth-of-type(2n){
      background: green;
    } */
}
.bigStarAll {
  margin-top: 20px;
}
.bigstar{
  width: 100%;
  display: flex;
  overflow-x: auto;
}
.deserveSee {
  width: 100%;
  height: 200px;
  .deserveSee-content{
    display: flex;
    justify-content: flex-start;
    overflow: auto;
  }
}
.recommend {
  margin-top: 20px;
  width: 100%;
  .recommend-card{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .van-cell{
      width: 50%;
    }
    .van-cell__title{
      width: 100%;
    }
    section{
      width: 100%;
      height: 300px;
      margin-top: 10px;
      img{
        display: block;
        width: 100%;
        height: 60%;
        border-radius: 10px;
      }
      p{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
        line-height: 20px;
      }
      p:nth-of-type(1){
        height: 40px;
        font-weight: bold;
      }
      p:nth-of-type(3){
        font-weight: bold;
        font-size: 16px;
        color: rgb(211, 3, 3);
      }
    }
  }
}
</style>
